<template>
  <div class="filter-table">
    <basic-container>
      <FilterForm/>
    </basic-container>
    <basic-container>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </basic-container>
  </div>
</template>

<script>
import BasicContainer from '@vue-materials/basic-container';
import FilterForm from './Filter';

export default {
  components: { BasicContainer, FilterForm },
  name: 'FilterTable',

  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',
    };
    return {
      tableData: Array(20).fill(item),
    };
  },

  created() {},

  methods: {},
};
</script>

<style>
.vue-demo-layout {
  width: 80%;
  margin: 40px auto;
}
.pagination-container{
  margin-top: 30px;
}
</style>
